<template>
    <div id="searchHot">
        <h1>热词</h1>
        <div
            @click="changeSong(item.keyword)"
            class="songlist"
            v-for="(item, i) in sugArr"
            :key="i"
        >{{ item.keyword }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sugArr: []
        }
    },
    watch: {
        async "$store.state.seachInpval"() {
            this.so();

        }
    },
    methods: {
        async so() {
            this.sugArr = (await this._fetch('/search/suggest', {
                keywords: this.$store.state.seachInpval,
                type: "mobile"
            })).result.allMatch
        },

        changeSong(val) {
            this.$store.commit('changeInp', val)
            this.$store.commit('showSearRes')

        }

    },
    async beforeMount() {
        this.so();
    },
}
</script>

<style lang="scss" >
#searchHot {
    .songlist {
        padding: 10px;
        border-bottom: 1px solid linen;
    }
}
</style>